<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>
    <!--添加jquery-ui支持-->
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}"/>
</head>
<body>
<div layout:fragment="content">
    <h1 th:text="#{handover}">交接记录</h1>
    <div align="center" th:if="${message != null}" class="error" th:text="${message}">错误消息</div>
    <div>
        <form id="handoverForm" class="form-horizontal" th:action="@{/handover/export}" method="post">
            <div class="form-group">
                <label for="year" class="col-sm-offset-3 col-sm-1 control-label" th:text="#{handover.date}">日期</label>
                <div class="col-sm-2">
                    <select name="year" id="year" class="form-control" required>
                        <th:block th:each="i:${#numbers.sequence(2018,2050)}">
                            <option th:value="${i}" th:text="${i +'年'}" th:selected="${i == nowYear}"></option>
                        </th:block>
                    </select>
                </div>

                <label for="week" class="col-sm-1 control-label" th:text="#{handover.date}">日期</label>
                <div class="col-sm-2">
                    <select name="week" id="week" class="form-control" required>
                        <th:block th:each="i:${#numbers.sequence(1,53)}">
                            <option th:value="${i}" th:text="${i +'周'}" th:selected="${i == nowWeek}"></option>
                        </th:block>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-5 col-sm-7">
                    <input type="submit" th:value="#{submit}" class="btn btn-info col-sm-offset-0"/>
                    &nbsp; &nbsp; &nbsp;
                    <a href="/handover/list" th:href="@{/handover/list}" class="btn btn-info col-sm-offset-1"
                       th:text="#{back}">返回</a>
                </div>
            </div>

        </form>
    </div>
</div>

<th:block layout:fragment="pagescript">
    <script th:src="@{/js/jquery-viladate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/jquery-viladate/messages_zh.min.js}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            $("#handoverForm").validate({
                onsubmit:true,

                rules: {
                    year:{
                        remote: {
                            url: [[@{/handover/exportValidate}]],     //后台处理程序
                            type: "post",
                            data: {
                                year: function() {
                                    return $("#year").val();
                                },
                                week: function() {
                                    return $("#week").val();
                                }
                            }
                        }
                    }
                },
                messages:{
                    year:{
                        remote: "交接记录有缺失，请补全交接后重试"
                    }
                },
                submitHandler: function(form) {
                    form.submit();
                },
                invalidHandler: function(form, validator) {return false;}
            });
        });
    </script>
</th:block>
</body>
</html>
